import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate, useParams } from 'react-router-dom'
import Item from '../components/MyItem'
import { getDetail } from '../store/action'
import { StoreDispatch, ReducerType } from '../utils/Type'

type Props = {}

const Details = (props: Props) => {
    const params = useParams()
    const dispatch: StoreDispatch = useDispatch()
    useEffect(() => {
        console.log("id",params.id)
        dispatch(getDetail(params.id as string))//传入id
    }, [dispatch, params])//监听是否有变化

    const navigate = useNavigate()

    const detailInfo = useSelector((state: ReducerType) => state.detailInfo)
    return (
        <div className='wrap detail'>
            <div onClick={() => navigate(-1)}> 返回 </div>
            <Item item={detailInfo}></Item>
        </div>
    )
}

export default Details